<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
		/* 	p:first-child{
				color: red;
			} */
			/* p:first-of-type{
				color: red;
			} */
			
			/* p:last-child{
				color: blue;
			} */
			
			/* p:last-of-type{
				color: red;
			} */
			/* p:nth-child(3){
				color: red;
			} */
		/* 	p:nth-of-type(3){
				color: red;
			} */
			/* p:nth-last-child(2){
				color: red;
			} */
		/* 	p:nth-last-of-type(2){
				color: red;
			} */
			p:only-child{
				color: green;
			}
			p:only-of-type{
				color: green;
			}
			
		</style>
	</head>
	<body>
		<!-- css3中新增的选择器最具有代表的就是序选择器
		 
		 1.同级别的第几个
		 first-child 选中同级别中第一个标签
		 注意点:不区分类型
		 last-child 选中同级别最后一个标签
		 nth-child(n) 选中同级别中的第n个标签
		 nth-last-child(n) 选取同级别中倒数第n个标签
		 only-child
		 
		 2.同类型的第几个
		 first-of-type  选中同级别中同类型的第一个标签  因为最外层同级别最后一个是div 不满足是p
		 
		 last-of-type选中同级别同类型中最后一个标签
		 nth-of-type(n) 选中同级别中同类型中的第n个
		 nth-last-of-type(n) 选取同级别中同类型倒数第n个
		 only-of-type
		 
	
		 -->
		<h1>我是一个标题</h1>
		<p>我是一个段落1</p>
		<p>我是一个段落2</p>
		<p>我是一个段落3</p>
		<p>我是一个段落4</p>
		<div>
			<p>我是一个段落5</p>
			<p>我是一个段落6</p>
			<p>我是一个段落7</p>
			<p>我是一个段落8</p>
		</div>
		
		<div>
			<p>唯一的段落</p>
		</div>
		
		<div>
			<h1>测试的h1</h1>
			<p>唯一的段落</p>
		</div>
		
		<!-- <p>123213</p> -->
		
	</body>
</html>